<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 赛程管理</el-breadcrumb-item>
                <el-breadcrumb-item>赛程</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="赛事名称" prop="compName" align="center"/>
            <el-table-column label="运动员编号" prop="playerID" align="center"/>
            <el-table-column label="运动员姓名" prop="playerName" align="center"/>
            <el-table-column label="成绩" prop="score" align="center"/>
            <el-table-column align="center">
            <template #header>
                <span>操作</span>
            </template>
            <template #default="scope">
                <el-button size="small" icon="el-icon-edit"
                     @click="handleEdit(scope.$index, scope.row)" type="danger">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 编辑弹出框 -->
        <el-dialog v-model="dialogFormVisible" title="赛事" center>
            <el-form :model="compForm" :label-width="formLabelWidth">
            <el-form-item label="赛事名称">
                <el-input v-model="compForm.compName" disabled/>
            </el-form-item>
            <el-form-item label="运动员编号">
                <el-input v-model="compForm.playerID" disabled/>
            </el-form-item>
            <el-form-item label="运动员姓名" >
                <el-input v-model="compForm.playerName" disabled/>
            </el-form-item>
            <el-form-item label="成绩">
                <el-input v-model="compForm.score" autocomplete="off" />
            </el-form-item>
            </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEdit()">确认</el-button>
            </span>
            </template>
        </el-dialog>
       <!-- 分页 -->
        <el-card>
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                background="true"
                layout="total, prev, pager, next, jumper"
                :total="parseInt(totalNum)" 
                :page-sizes="pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>
    </div>
  
</template>

<script>
import { computed, reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from 'vuex';
import { map } from 'lodash';

export default{
    setup(){
        const store = useStore();

        let dialogFormVisible = ref(false)
        const formLabelWidth = '140px'
        const compForm = reactive({
            compName: '',//赛事名称
            playerID:'',//运动员编号
            playerName:'',//运动员姓名
            score:0,//成绩
        });

        onMounted(()=>{
            getScoreList();
        })

        let tableData = reactive([]);
        const getScoreList = ()=>{
            store.dispatch("AllPlayerScore",{
                page:currentPage.value,
                pageSize:pageSize.value,
            }).then(res=>{
                if(res.code===200){
                    totalNum.value = res.obj.records;
                    tableData.splice(0,tableData.length,...map(flatCompetitions(res.obj.rows),item=>{
                        return {
                            compName: item.cname,
                            playerID: item.pid,
                            playerName: item.name,
                            score: item.score
                        }
                    }))
                    // console.log("@成绩列表",tableData);
                }else{
                    console.log("获取成绩信息失败",res.message);
                }
            })
        }

        //处理嵌套数组
        function flatCompetitions(x) {
            let ret = [];
            for (let person of x) {
                let competitions = person.competitions;
                delete person.competitions;
                for (let cpt of competitions) {
                    Object.assign(cpt, person);
                    ret.push(cpt);
                }
            }
            // console.log(ret);
            return ret;  
        }

        
        const handleEdit = (index, row) => {
            dialogFormVisible.value = true;
            // console.log("index is ",index);
            // console.log("row is ",row);
            compForm.compName = row.compName;
            compForm.playerID = row.playerID;
            compForm.playerName = row.playerName;
            compForm.score = row.score;
        }

        const saveEdit = ()=>{
            console.log("需要保存的编辑项目索引",compForm);
            ElMessageBox.confirm("确定要保存吗","提示",{
                type:"warning",
                center:true,
            }).then(()=>{
                console.log("要更新的内容",compForm);
                store.dispatch("UpdatePlayerScore",{
                    pid:compForm.playerID,
                    cname:compForm.compName,
                    score:compForm.score,
                }).then(res=>{
                    if(res.code===200){
                        ElMessage({
                            type:"success",
                            message:"更新成功",
                            center:true,
                        })
                        getScoreList();
                    }else{
                        ElMessage({
                            type:"error",
                            message:"更新失败",
                            center:true,
                        })
                    }
                })
                dialogFormVisible.value = false
            }).catch((err)=>{
                console.log("更新异常",err);
            })
        }
        
       //分页
        let currentPage = ref(1);
        let pageSize = ref(5);
        let totalNum = ref(14);//总条数除以每页显示条数5
        const handleSizeChange = (val) => {
            // console.log(`${val} items per page`)
        }
        const handleCurrentChange = (val) => {
            // console.log(`current page: ${val}`)
            getScoreList();
        }
        return {
            compForm,
            dialogFormVisible,
            formLabelWidth,
            tableData,
            handleEdit,
            saveEdit,
            getScoreList,
            //分页
            currentPage,
            pageSize,
            totalNum,
            handleSizeChange,
            handleCurrentChange,
        }
    }
}
</script>

<style scoped>
   
</style>